<template>
  <div class="margin-bottom">
    <!-- 名称和评分-->
    <div class="margin-bottom-20">
      <span class="movie-name">
        {{ movieInfo.movieName }}
      </span>
      <span class="movie-score">
        {{ Number(movieInfo.score).toFixed(1) }}
      </span>
      <span class="movie-score-unit">
        分
      </span>
    </div>
    <!-- 时长和类型-->
    <sn-row-has-four-col
        :one="3"
        :two="4"
        :three="17">
      <div slot="one-col">
         <span class="des">
        时长 :
        </span>
        <span class="content">
          {{ movieInfo.time }}
        </span>
        <span class="des">
          分钟
        </span>
      </div>
      <div slot="two-col">
        <span class="des">
        类型 :
        </span>
        <span v-for="item in movieInfo.movieTypes" class="content">
        {{ item }}
        </span>
      </div>
      <div slot="three-col">
        <span class="des">
              主演 :
        </span>
        <span v-for="item in movieInfo.movieActors" class="content">
          {{ item }}
        </span>
      </div>
    </sn-row-has-four-col>
  </div>
</template>

<script>
export default {
  name: "ChooseMovieInfo",
  props: {
    movieInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
}
</script>

<style scoped>
.movie-name {
  font-size: 25px;
  margin-right: 40px;
}

.movie-score {
  font-size: 25px;
  color: #FAAF00;
}

.movie-score-unit {
  font-size: 14px;
  color: #FAAF00;
  position: relative;
  bottom: 5px;
  left: 3px;
}

.des {
  font-size: 14px;
  color: #999;
}

.content {
  font-size: 14px;
}
</style>